<template>
    <div class="add_commondity">
        <!-- 步骤条 -->
        <header>
            <el-steps :active="active" finish-status="success">
                <el-step title="商品信息"></el-step>
                <el-step title="商品详情"></el-step>
                <el-step title="其他设置"></el-step>
                <el-step title="规格设置"></el-step>
            </el-steps>
        </header>
        <!-- 动态组件 -->
        <main>
            <keep-alive>
                <component
                    v-bind:is="getCName"
                    ref="activeComponent"
                ></component>
            </keep-alive>
        </main>
        <!-- 操作按钮 -->
        <footer class="option">
            <el-button v-if="active !== 0" @click="last">上一步</el-button>
            <el-button type="primary" v-if="active === 3" @click="submit"
                >提交</el-button
            >
            <el-button type="primary" v-else @click="next">下一步</el-button>
        </footer>
    </div>
</template>

<script>
import TheForm from './components/TheForm'
import WangEditor from '../../components/WangEditor'
import TheOrderEdit from './components/TheOrderEdit'
import TheSpecificationEdit from './components/TheSpecificationEdit'
export default {
    components: {
        TheForm,
        WangEditor,
        TheOrderEdit,
        TheSpecificationEdit,
    },
    data() {
        return {
            active: 0,
            componentsList: [
                { cName: 'TheForm', active: 0 },
                { cName: 'WangEditor', active: 1 },
                { cName: 'TheOrderEdit', active: 2 },
                { cName: 'TheSpecificationEdit', active: 3 },
            ],
            formObj: {},
        }
    },
    computed: {
        getCName() {
            return this.componentsList.filter(
                (item) => item.active === this.active
            )[0].cName
        },
    },
    methods: {
        last() {
            this.active -= 1
        },
        next() {
            switch (this.active) {
                case 0:
                    this.$refs.activeComponent.submitForm('ruleForm').then(
                        () => {
                            // assign 合并对象
                            Object.assign(
                                this.formObj,
                                this.$refs.activeComponent.ruleForm
                            )
                            this.active += 1
                        },
                        () => {}
                    )
                    break
                case 1:
                    if (this.$refs.activeComponent.editorContent) {
                        Object.assign(this.formObj, {
                            content: this.$refs.activeComponent.editorContent,
                        })
                        this.active += 1
                    } else {
                        this.$message.error('请输入商品详情')
                    }
                    break
                case 2:
                    console.log(this.$refs.activeComponent.validate())
                    if (this.$refs.activeComponent.validate()) {
                        // 合并其他设置
                        Object.assign(this.formObj, {
                            sort: 1,
                            integral: 1,
                            virtualSales: 1,
                        })
                        this.active += 1
                    } else {
                        this.$message.error('请输入三个数字')
                    }

                    break
            }
        },
        submit() {
            console.log(this.formObj)
        },
    },
}
</script>

<style lang='scss' scoped>
.add_commondity {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header {
        height: 100px;
    }
    main {
        flex: 1;
        overflow: auto;
    }
    footer {
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        button {
            height: max-content;
        }
    }
}
</style>